<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="行程记录"></TopNav>
		<view class="main">
			<view class="flex justify-between align-center">
				<text class="text-bold f-s15 p-lr8">已完成订单</text>
				<YearMonthPicker v-model="queryParams.date" @change="getList"></YearMonthPicker>
				<!-- 	<view class="down-menu">
					<text>2024年12月</text>
					<image src="/static/images/index/down.png" class="width-12 height-12" mode=""></image>
				</view> -->
			</view>
			<view class="flex-1 overflow-hidden m-t10">
				<scroll-view class="full-height" scroll-y="true" @scrolltolower="handleScrollBottom">
					<view class="radius bg-white list-item" v-for="item in list" :key="item.id">
						<view class="flex align-center justify-between">
							<text class="f-s15 text-bold">{{item.title}}</text>
							<text class="text-bold f-s16">¥{{item.total_money}}</text>
						</view>
						<view class="m-t8 text-gray f-s12">
							<text>{{item.create_time}}</text>
						</view>
						<view class="m-t8 f-s12 flex align-center">
							<view class="round width-6 height-6 bg-theme m-r8"></view>
							<text>{{item.set_out_address}}</text>
						</view>
						<view class="m-t8 f-s12 flex align-center">
							<view class="round width-6 height-6 bg-black m-r8"></view>
							<text>{{item.arrive_address}}</text>
						</view>
					</view>
					<view class="padding-tb-xs" v-if="total !== 0">
						<u-loadmore :status="loadmoreStatus" line @loadmore="handleScrollBottom" />
					</view>
					<Empty :show="total === 0" top="20rpx"></Empty>
				</scroll-view>
			</view>

		</view>
	</view>
</template>

<script>
	import mixins from "@/mixins"
	import Empty from '@/components/empty/index.vue'
	import YearMonthPicker from "@/components/picker-year-month/index.vue"
	import {
		rideList
	} from '@/api/index/data.js'
	export default {
		name: "",
		mixins: [mixins],
		components: {
			Empty,
			YearMonthPicker
		},
		data() {
			return {
				list: [],
				queryParams: {
					date: '',
					page: 1,
					limit: 10
				},
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {

			getList() {
				rideList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count || 0
					this.pageTotal = total || 0
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/css/var.scss';

	.container {

		.main {
			padding: 46rpx 32rpx;
			@include fixed-height;
			overflow: hidden;
			display: flex;
			flex-direction: column;



			.list-item {
				padding: 24rpx;
				margin-bottom: 20rpx;

				.tag {
					font-weight: 400;
					font-size: 22rpx;
					color: #FE3F59;
					line-height: 32rpx;
					border-radius: 4rpx;
					border: 1rpx solid #FE3F59;
					text-align: center;
					padding: 0 6rpx;
					margin-left: 12rpx;
				}
			}
		}
	}
</style>